<template>
  <el-form label-width="100px">
    <CommonProps :compWidth="false" :labelWidth="false" :placeholder="false" :field="false" />
    <el-form-item label="线上文字">
      <el-input v-model="fs.getProps().text" />
    </el-form-item>
    <el-form-item label="风格">
      <div class="style" @click="fs.getProps().style = 'solid'">
        <div class="item" style="border-style: solid"></div>
        <el-icon :size="20" color="#67C23A" v-if="fs.getProps().style === 'solid'">
          <Select />
        </el-icon>
      </div>
      <div class="style" @click="fs.getProps().style = 'dashed'">
        <div class="item" style="border-style: dashed"></div>
        <el-icon :size="20" color="#67C23A" v-if="fs.getProps().style === 'dashed'">
          <Select />
        </el-icon>
      </div>
      <div class="style" @click="fs.getProps().style = 'dotted'">
        <div class="item" style="border-style: dotted"></div>
        <el-icon :size="20" color="#67C23A" v-if="fs.getProps().style === 'dotted'">
          <Select />
        </el-icon>
      </div>
      <div class="style" @click="fs.getProps().style = 'double'">
        <div class="item" style="border-style: double"></div>
        <el-icon :size="20" color="#67C23A" v-if="fs.getProps().style === 'double'">
          <Select />
        </el-icon>
      </div>
      <div class="style" @click="fs.getProps().style = 'groove'">
        <div class="item" style="border-style: groove"></div>
        <el-icon :size="20" color="#67C23A" v-if="fs.getProps().style === 'groove'">
          <Select />
        </el-icon>
      </div>
    </el-form-item>
    <el-form-item label="上边距(px)">
      <el-input-number v-model="fs.getProps().marginTop" :min="0" controls-position="right" />
    </el-form-item>
    <el-form-item label="右边距(px)">
      <el-input-number v-model="fs.getProps().marginRight" :min="0" controls-position="right" />
    </el-form-item>
    <el-form-item label="下边距(px)">
      <el-input-number v-model="fs.getProps().marginBottom" :min="0" controls-position="right" />
    </el-form-item>
    <el-form-item label="左边距(px)">
      <el-input-number v-model="fs.getProps().marginLeft" :min="0" controls-position="right" />
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts">
import CommonProps from '../../common-props/Props.vue'
import { ElForm, ElFormItem, ElInput, ElInputNumber, ElIcon } from 'element-plus'
import { Select } from '@element-plus/icons-vue'
import { useFlowStore } from '@/stores/flow'

const fs = useFlowStore()
</script>

<style lang="scss" scoped>
:deep(.style) {
  margin: 15px 0 0 0;
  display: flex;
  .item {
    border-color: transparent;
    border-top-color: #dcdfe6;
    border-top-width: 2px;
    width: 150px;
    height: 20px;
  }
  &:hover {
    cursor: pointer;
    background-color: $--color-bg-gray;
  }
  .el-icon {
    margin-top: -8px;
    margin-left: 6px;
  }
}
</style>
